<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

<style type="text/css">
body{  
  background:#333;  
}  
.cell{  
    width: 1em;    
    height: 1em;  
    font-size:520px;  
    overflow: hidden;  
    position:absolute;  
    top:50%;  
    left:50%;  
    margin:-0.5em 0 0  -0.5em;  
    opacity:0;  
    animation:go 4s;  
    transform-origin:left bottom;  
}  
.num{  
    position:absolute;  
    width: 1em;  
    color:#E53F39;  
    line-height: 1em;    
    text-align: center;  
    text-shadow:1px 1px 2px rgba(255,255,255,.3);  
    animation:run 4s steps(4);  
}  
.test{
	visibility: hidden;
}
@keyframes run{  
    0%{top:0;}  
    100%{top:-4em;}  
}  
@keyframes go{  
  0%   {opacity:1;}  
  84%  {opacity:1;transform:rotate(0deg) scale(1);}  
  100% {opacity:0;transform:rotate(360deg) scale(.01);}  
}
</style>

</head>
<body>

	<button id="bttest">start</button>
<div class="show"></div>

</body>

<script type="text/javascript">
	$('#bttest').click(function(event) {
		/* Act on the event */
		// $('.cell').css('display','inline');
		// $('.num').css('display','inline');

		// var celldiv = $('<div>');
		// celldiv.addClass('cell');

		// var numdiv = $('<div>');
		// numdiv.addClass('num')

		// celldiv.append(numdiv);

		$('.show').append("<div class='cell'><div class='num'>3 2 1 0</div></div>");
		console.log($('.show')[0]);
		setTimeout(function () {
			// body...
			$('.cell').remove();
			console.log($('.show')[0]);
		},4000);




	});
</script>


</html>